<template>
	<view>
		<!-- 头部 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#000" size="50"></u-icon>
			<text>手机验证码登录</text>
		</view>
		<view class="content" style="width: 100%;height:90vh;background-color: #fff;">

			<form class="cl">
				<view class="t-a">

					<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="mobile" />
				</view>
				<view class="t-a" style="display: flex;align-items: center;">

					<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="yzm" />
					<view
						style="background-color: #007AFF;border-radius: 12px;padding:3px 7px;margin-top: -20px;margin-left:3px"
						v-if="showText" class="t-c" @click="getCode()">获取验证码</view>
					<view v-else class="t-c"
						style="background-color: #A7A7A7;margin-top:-16px;margin-left:3px;padding:3px 7px;border-radius: 12px;color:#fff">
						重新发送({{ second }})</view>
				</view>
				<button @click="login()">登 录</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yzm: '',
				showText: true,
				mobile: '',
				second: 60,
				no:''
			}
		},
		onLoad(query) {
			console.log(query, 55)
			if (query.no) {
				this.no = query.no
				console.log(this.no, 44)
			}
			},
		methods: {
			getCode() {
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				var that = this;
				var interval = setInterval(() => {
					that.showText = false;
					var times = that.second - 1;
					//that.second = times<10?'0'+times:times ;//小于10秒补 0
					that.second = times;
					console.log(times);
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					that.second = 60;
					that.showText = true;
				}, 60000);
				//这里请求后台获取短信验证码
				this.$api.sendCode({
					mobile: this.mobile,
					smsmode: 1
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							icon: 'success',
							title: '发送成功'
						})
					}else if(res.message.includes('手机号已经注册')){
						this.$api.sendCode({
							mobile: this.mobile,
							smsmode: 2
						}).then(res=>{
							if (res.code === 0) {
								uni.showToast({
									icon: 'success',
									title: '发送成功'
								})
								}
						})
					}
				})
			},
			login() {
				this.$api.loginByCode({
					mobile: this.mobile,
					captcha: this.yzm
				}).then(res => {
					if (res.code === 0) {
						uni.setStorageSync('zwxphone', this.mobile);
						uni.setStorageSync('loginPageRedic', true);
						uni.setStorageSync('token', res.result)
						this.searchCode()
					}
				})
			},
			async searchCode() {

				const deviceRes = await this.$api.lastDeviceInfo();
				if (deviceRes.code === 200 || deviceRes.code === 204) {
				uni.reLaunch({
					url:'../../index/index'
				})
				} else {
					// const code = uni.getStorageSync('code');
					// console.log(code,77)
					if (this.no) {
						this.experience(this.no)
					}else{
						uni.switchTab({
							url:'../../my/my'
						})
					}

				}
			},
			async experience(e) {

				if (!e) {
					return
				}

				this.$api.searchDeviceBinding({
					deviceCode: e
				}).then(res => {
					if (res.code === 200) {
						let data = res.result.personList
						if (data.length) {
							let tpl_param = {
								code: e,
								name: data[0].name,
								name2: '',
								sex: data[0].sex,
								height: data[0].height,
								weight: data[0].weight,
								datatime: data[0].birthday,
								index: 6,
								// icon: this.icon
							};

							this.$api.bindDevice(tpl_param).then(response => {
								uni.hideLoading();
								if (response.code == 200 || response.code === 500) {
									// const code = uni.getStorageSync('code');
									// if(code){
									// 	uni.clearStorageSync('code')
									// 	console.log(code,222)
									// }
									uni.reLaunch({
										url: '../../index/index'
									})
								}
							})
						}
					} else {
						uni.navigateTo({
							url: '/pages/login/binding/device/device?code=' +
								e
						})
					}
				})
			},
			// 返回
			navigateBack() {
				// uni.navigateTo({
				// 	url: '../invitation'
				// })
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1]
				let prevPage = pages[pages.length - 2]

				uni.navigateBack({
					delta: prevPage
				})
			},
		}
	}
</script>

<style scoped lang='scss'>
	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}

	button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-a {
		position: relative;

	}

	.t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		padding-right: 20rpx;
	}

	.t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 120rpx 0;
		font-weight: bold;
	}

	.content {
		width: 100%;
		background-color: #F1F1F1;
		padding: 28rpx 36rpx;
		box-sizing: border-box;
		font-size: 13px;
		color: #555;
		height: 95vh;
		overflow: auto;
	}

	.navbar {
		padding-top: 90rpx;
		padding-bottom: 40rpx;
		width: 750rpx;
		color: #000;
		background-color: #fff;
		/* 		z-index: 555;
		position: fixed;
		top:0;
		overflow: hidden; */
	}

	.navbar>text {
		font-size: 36rpx;
		padding-left: 40rpx;
		font-weight: bold;
	}

	// 内容
	.section {
		padding: 30rpx;
	}
</style>
